<template>
    <div class="main-box" v-loading="loading">
        <div class="statistics-box dl-row-sa center">
            <div class="item dl-column center">
                <div class="dl-row end">
                    <h1>{{result.examCount}}</h1>
                    <span>场</span>
                </div>
                <p>考试总数</p>
            </div>
            <div class="item dl-column center">
                <div class="dl-row end">
                    <h1>{{result.rightCount}}</h1>
                    <span>道</span>
                </div>
                <p>答对题目</p>
            </div>
            <div class="item dl-column center">
                <div class="dl-row end">
                    <h1>{{formatSeconds(result.useTime)}}</h1>
                    <span>秒</span>
                </div>
                <p>考试时长</p>
            </div>
        </div>
        <div class="dl-row-sb mar-top-20">
            <ul class="st-data" style="margin-right: 60px">
                <li>
                    <p>考试次数</p>
                    <div class="dl-row end">
                        <h1>{{result.examCount}}</h1>
                        <span>次</span>
                    </div>
                </li>
                <li>
                    <p>通过次数</p>
                    <div class="dl-row end">
                        <h1>{{result.passCount}}</h1>
                        <span>次</span>
                    </div>
                </li>
            </ul>
            <div>
                <div style="width: 230px;height:165px;" id="tjEcharts"></div>
                <ul class="st-data2 dl-row-sb">
                    <li class="dl-column center">
                        <p>答对题目</p>
                        <div class="dl-row end">
                            <h1>{{result.rightCount}}</h1>
                            <span>道</span>
                        </div>
                    </li>
                    <li class="dl-column center">
                        <p>正确率</p>
                        <div class="dl-row end">
                            <h1>{{correctLv}}</h1>
                            <span>%</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div style="width: 500px;height:300px;" id="examInfo"></div>
        </div>
    </div>
</template>

<script>
    import {getExamStatistics} from '@/api/check'
    import {formatSeconds} from '@/utils/index'
    import * as echarts from "echarts"

    export default {
        name: "collect",
        data() {
            return {
                loading: false,
                type: 1,
                result: {},
                correctLv: 0,
            }
        },
        methods: {
            formatSeconds,
            findExamStatistics() {
                const params = {type: this.type};
				this.loading = true
                getExamStatistics(params).then(data => {
                    this.result = data
                    if (this.result.rightCount) {
                        this.correctLv = Number((this.result.rightCount / (this.result.wrongCount + this.result.rightCount) * 100).toFixed(2))
                    }
                    this.setStatisticsEcharts(this.result)
                    this.setExamInfoEcharts(this.result)
					setTimeout(()=>{
					  this.loading=false
					},300)
                }).catch(res=>{
					this.loading=false
				})
            },
            setStatisticsEcharts(result) {
                let tjEcharts = echarts.init(document.getElementById("tjEcharts"))
                const option = {
                    tooltip: { //提示框组件
                        trigger: 'item', //触发类型(饼状图片就是用这个)
                        formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
                    },
                    color: ['#2868b0', '#f45333'],  //手动设置每个图例的颜色
                    legend: {  //图例组件
                        //right:100,  //图例组件离右边的距离
                        orient: 'horizontal',  //布局  纵向布局 图例标记居文字的左边 vertical则反之
                        width: 40,      //图行例组件的宽度,默认自适应
                        x: 'right',   //图例显示在右边
                        y: 'center',   //图例在垂直方向上面显示居中
                        itemWidth: 10,  //图例标记的图形宽度
                        itemHeight: 10, //图例标记的图形高度
                        data: ['正确', '错误'],
                        textStyle: {    //图例文字的样式
                            color: '#333',  //文字颜色
                            fontSize: 12    //文字大小
                        }
                    },
                    series: [ //系列列表
                        {
                            name: '答题结果',  //系列名称
                            type: 'pie',   //类型 pie表示饼图
                            center: ['40%', '50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                            radius: ['50%', '70%'],  //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                            itemStyle: {  //图形样式
                                normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                    label: {  //饼图图形上的文本标签
                                        show: false  //平常不显示
                                    },
                                    labelLine: {     //标签的视觉引导线样式
                                        show: false  //平常不显示
                                    }
                                },
                                emphasis: {   //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                    label: {  //饼图图形上的文本标签
                                        show: true,
                                        position: 'center',
                                        textStyle: {
                                            fontSize: '10',
                                            fontWeight: 'bold'
                                        }
                                    }
                                }
                            },
                            data: [
                                {value: result.rightCount, name: '正确'},
                                {value: result.wrongCount, name: '错误'},
                            ]
                        }
                    ]
                };
                tjEcharts.setOption(option);
            },
            setExamInfoEcharts(result) {
                let mEcharts = echarts.init(document.getElementById("examInfo"))
                let data = result.latelyRecord;
                let xdata = [];
                let ydata = [];
                data.forEach(item => {
                    xdata.push(item.startDate)
                    const yItem={
                        value:item.source,
                        isPass:item.isPass,
                    }
                    ydata.push(yItem)
                })
                // echarts配置
                let option = {
                    title: {
                        text: '近7次考试成绩',
						textStyle:{
							fontSize:15
						},
                        left: 'center',
                    },
                    // 直角坐标系X轴的数据
                    xAxis: {
                        data: xdata,
                    },
                    tooltip: {
                        show:true,
                        trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                        axisPointer: {// 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.isPass===1?"<p style='color: green'>合格":"<p style='color: red'> 不合格</p>";
                        }
                    },
                    // 直角坐标系Y轴的数据，类型默认value数值轴可以不写，数据可以写在series中
                    yAxis: {
                        type: 'value'
                    },
                    // 系列组件
                    series: [
                        {
                            // 图形的类型
                            type: 'bar',
                            // Y轴的数据
                            data: ydata,
                            // 图形上的文本标签，可以用来说明图形的数据信息
							barWidth: 20, // 设置每个柱子的宽度为20
                            label: {
                                show: true,
                            },
                            itemStyle: {
                                normal: {
									barBorderRadius: [20],
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 12
                                        }
                                    },
                                    // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
                                    // 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0, color: '#0068B6'                   //指0%处的颜色
                                    }, {
                                        offset: 1, color: '#0068B6'                 //指100%处的颜色
                                    }], false)
                                }
                            }
                        },
                    ]
                }
                // 使用刚指定的配置项及数据
                mEcharts.setOption(option)
            }

        }
    }
</script>

<style scoped>

</style>
